<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts';
import resize from "@/views/dashboard/mixins/resize";

import { markRaw } from 'vue';

// import { createRequire } from 'module';
// const require = createRequire(import.meta.url);
// require('echarts/theme/macarons') // echarts theme

export default {
  name: 'LineChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '360px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    valueData: {
      type: Array,
      required: true
    },
    dwLabelData: {
      type: String,
      required: true
    },
    xLabelData: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    valueData: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    },
    xLabelData: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    },

    dwLabelData: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      let a = this;
      this.chart = markRaw(echarts.init(this.$el, 'macarons'))
      this.chart.on('click', function (params) {
        //console.logparams.name)
        a.$emit('gysClick', params.name);
      })
      console.log()
      this.setOptions();
    },
    setOptions() {
      let seriesss = [];
      let nameData = [];
      let thh = this;
      console.log(this.valueData)
      this.valueData.forEach(obj => {
        nameData.push(obj.name);
        seriesss.push({
          name: obj.name,
          data: obj.data,
          type: 'line',
          label: {
               show: false,
              position: 'top',
              formatter: function (params) {
                return params.data + thh.dwLabelData;
              }
          }
        },)
      });


      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },

        grid: {
          top: '12%',
          left: '3%',
          right: '3%',
          bottom: '2%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          data: this.xLabelData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            show: false,
          },
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: nameData
        },
        series: seriesss
      })
    }
  }
}
</script>

<style type="text/css">
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}
</style>
